<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/logo.jpg" alt="">
    </div>
    <yanzhengma @sure="login"></yanzhengma>
    <button @click="loginbtn" class="loginbtn">登录</button>
    <div class="msg" style="text-align:center;">
      <span style="font-size:13px;">
        未注册手机号
        <font style="color:red;">登录</font>后将
        <font style="color:red;">自动生成账户</font>
      </span>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import yanzhengma from "../components/yanzhengma";
export default {
  name: "login",
  data() {
    return {
      m: ""
    };
  },
  methods: {
    ...mapMutations(["setprovince","setvalidation", "login",'setdresslist',"loginsetdress",'setnickname','setpwdshow',"setcity","setschool"]),
    login(value) {
      if (value.msg == "success") {
        this.m = "success";
        this.phonenum = value.phonenum;
      } else {
        this.m = "";
      }
    },
    loginbtn() {
      if(this.m == "success") {
        this.axios
          .post("http://127.0.0.1:3000/login", {
            data: { phone: this.phonenum }
          })
          .then(res => {
            this.$store.commit('setnickname',res.data.msg[0].nickname);
            this.$store.commit('setdresslist',res.data.msg[0].address);
            this.$store.commit('setpwdshow',res.data.msg[0].password);
            this.$store.commit("login", this.phonenum);
            this.$store.commit("setvalidation", null);
            this.$store.commit("setprovince",res.data.msg[0].province);
            this.$store.commit("setcity",res.data.msg[0].city);
            this.$store.commit("setschool",res.data.msg[0].school);
            this.$store.commit("loginsetdress",res.data.msg[0].dress);
            this.getorder(this.phonenum)
            this.$router.push({ path: "/" });
          })
          .catch(err => {
            console.log(err);
          });
       
      } else {
        alert("验证码错误");
      }
    },
    getorder(e){
      this.axios.post('http://127.0.0.1:3000/Dingdan',{phone:e})
              .then((res)=>{
                this.$store.commit('setshoplist',res.data.data)
              })
    },
  },
  components: {
    yanzhengma: yanzhengma
  }
};
</script>

<style scoped>
.login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.logo {
  width: 200px;
  margin:auto;
  text-align: center;
  overflow: hidden;
}
.logo img{
  width: 100%;
  height: 100%;
}
.login {
  /* border: 1px solid; */
  width: 320px;
  height: 380px;
}
.phone_number {
  border-bottom: 1px solid gray;
  padding: 30px 0 5px 0;
}
.validation {
  border-bottom: 1px solid gray;
  padding: 30px 0 5px 0;
  display: flex;
  justify-content: space-between;
}
.phone_number input,
.validation input,
.validation button {
  outline: none;
  border: none;
  background: none;
  display: inline-block;
  height: 25px;
}
.validation button {
  cursor: pointer;
}
.loginbtn {
  outline: none;
  border: none;
  border-radius: 3px;
  background: rgb(0, 166, 255);
  width: 80%;
  color: white;
  padding: 10px;
  margin: 30px;
  cursor: pointer;
}
</style>






